<template>
  <div class="dock-container">
    <div class="atomic flex-justify-between">
      <div v-for="(item, index) in dockTabData" :key="index"
           :class="{'active-tab': activeTab === index}"
           class=" text-align-center pad-lft-rgt-10"
           @click="changeTab(item.type, index)">
        <span>{{item.name}}</span>
      </div>
      <el-tooltip content="高级菜单" v-if="this.editorType === 'room' && this.widget.category === 'deviceWidget'">
        <span class="iconfont icon-gengduocaozuo mar-rgt-10" @click="showMenu=!showMenu"></span>
      </el-tooltip>
    </div>

    <div v-show="widgetType === 'style'" >
      <StatesDock :editor-type="editorType" :src-widget="widget"></StatesDock>
    </div>
    <div v-show="widgetType === 'attribute'" class="special-config-container">
      <AttributeDock :editor-type="editorType" :widget="widget"></AttributeDock>
    </div>
    <div v-show="widgetType === 'event'" class="event-cont">
      <EventDock :widget="widget"></EventDock>
    </div>
    <div v-show="widgetType === 'status'" class="event-cont">
      <StatusDock :widget="widget"></StatusDock>
    </div>
	  <div v-show="widgetType === 'data'" class="pad-lft-rgt-10">
		  <el-input type="textarea" :rows="30" :value="widgetStr"></el-input>
		  <el-input v-model="widgetId" placeholder="请输入组件ID" class="mar-top">
			  <el-button slot="append"  @click="consoleWidget">打印</el-button>
		  </el-input>
	  </div>
  </div>
</template>

<script>
  import StatesDock from "./dock/StatesDock";
  import AttributeDock from "./dock/AttributeDock.vue";
  import EventDock from "./dock/EventDock.vue";
  import StatusDock from "./dock/StatusDock.vue";
  import {WidgetClass} from "@/modules/IDE/widget/atom/widget";
  import {WidgetFactory} from "@/modules/IDE/widgetFactory";

  export default {
    name: "EditorDock",
    components: {
      StatesDock,
      AttributeDock,
      EventDock,
	    StatusDock,
    },
    props: {
	    editorType: {
		    type: String,
		    default: 'room', // room/component
	    },
      widget: {
        type: WidgetClass,
        default: () => {
	        return {};
        },
      },
    },
    data() {
      return {
        widgetType: 'style',
        activeTab: 0,
	      widgetId: '',
        showMenu: false,
      };
    },
	  computed: {
		  widgetStr() {
			  const {
				  hash, _id, id, parentId, sourceId, roomId, componentId, subPageId, relateSubPage, relateSubPageId,
				  type, category, name, rect, isRoot, display, displayForPicker, visible, active, activeForPicker, sortNo,
				  draggable, droppable, resizable, selectable, isLocked, isFreeze, isChildrenFreeze, isEditing, isDeleted,
				  children,
				} = this.widget;
				return JSON.stringify({
					hash, _id, id, parentId, sourceId, roomId, componentId, subPageId, relateSubPage, relateSubPageId,
					type, category, name, rect, isRoot, display, displayForPicker, visible, active, activeForPicker, sortNo,
					draggable, droppable, resizable, selectable, isLocked, isFreeze, isChildrenFreeze, isEditing, isDeleted,
					children: children.length
				}, null, 2);
		  },
      dockTabData() {
        if (this.editorType === 'room' && this.widget.category === 'deviceWidget')  {
          this.widgetType = 'attribute';
          this.activeTab = 0;
          let arr = [{name: '属性', type: 'attribute', isDisPlay: true},
            {name: '样式', type: 'style', isDisPlay: this.showMenu},
            {name: '交互', type: 'event', isDisPlay:this.showMenu},
          ]
          return arr.filter((item)=> {
            return item.isDisPlay
          })
        } else {
          this.widgetType = 'style';
          this.activeTab = 0;
          return [
            {name: '样式', type: 'style'},
            {name: '属性', type: 'attribute'},
            {name: '交互', type: 'event'},
            {name: '数据', type: 'data'}]
        }
      }
	  },
    methods: {
      changeTab(type, idx) {
        this.activeTab = idx;
        this.widgetType = type;
      },
	    consoleWidget() {
				if (!this.widgetId) return;
				console.log('##### widget #####', WidgetFactory.getWidgetById(this.widgetId));
	    }
    },
  };
</script>

<style scoped lang="less">
  .atomic {
    width: 100%;
    border-bottom: 1px #DADCE5 solid;
    border-top: 1px #DADCE5 solid;
    height: 50px;
    line-height: 50px;
    color: #12131A;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    padding: 0 10px;
    //justify-content: space-around;

    .active-tab {
      color: #2D69E0;
    }
  }
</style>
